<template>
  <div class="ticket-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <el-icon><List /></el-icon>
          工单管理
        </h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>工单管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-button-group>
          <el-button @click="refreshTickets">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon total">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalTickets }}</div>
            <div class="stat-label">总工单数</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon pending">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.pendingTickets }}</div>
            <div class="stat-label">待处理</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon progress">
            <el-icon><Timer /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.inProgressTickets }}</div>
            <div class="stat-label">处理中</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon resolved">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.resolvedTickets }}</div>
            <div class="stat-label">已解决</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 筛选工具栏 -->
    <el-card class="filter-card">
      <div class="filter-toolbar">
        <div class="filter-left">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索工单标题、描述或编号"
            clearable
            @input="handleSearch"
            style="width: 300px;"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <el-select
            v-model="statusFilter"
            placeholder="状态筛选"
            clearable
            @change="handleFilter"
            style="width: 120px; margin-left: 12px;"
          >
            <el-option label="全部状态" value="" />
            <el-option label="待处理" value="OPEN" />
            <el-option label="处理中" value="IN_PROGRESS" />
            <el-option label="挂起" value="PENDING" />
            <el-option label="已解决" value="RESOLVED" />
            <el-option label="已关闭" value="CLOSED" />
          </el-select>
          
          <el-select
            v-model="priorityFilter"
            placeholder="优先级筛选"
            clearable
            @change="handleFilter"
            style="width: 120px; margin-left: 12px;"
          >
            <el-option label="全部优先级" value="" />
            <el-option label="高" value="HIGH" />
            <el-option label="中" value="MEDIUM" />
            <el-option label="低" value="LOW" />
          </el-select>
          
          <el-select
            v-model="assigneeFilter"
            placeholder="负责人筛选"
            clearable
            @change="handleFilter"
            style="width: 150px; margin-left: 12px;"
          >
            <el-option label="全部负责人" value="" />
            <el-option 
              v-for="agent in agents" 
              :key="agent.id" 
              :label="agent.name" 
              :value="agent.id" 
            />
          </el-select>
        </div>
        
        <div class="filter-right">
          <el-button @click="resetFilters">重置筛选</el-button>
          <el-button type="primary" @click="applyFilters">应用筛选</el-button>
        </div>
      </div>
    </el-card>

    <!-- 工单列表 -->
    <el-card class="ticket-list-card">
      <template #header>
        <div class="card-header">
          <span>工单列表</span>
          <div class="header-actions">
            <el-button 
              v-if="authStore.isAuthenticated && ['admin','agent','manager'].includes(authStore.role)"
              @click="goStatisticsDashboard">
              <el-icon><DataAnalysis /></el-icon>
              统计报表
            </el-button>
            <el-button-group>
              <el-button 
                :type="viewMode === 'table' ? 'primary' : ''"
                @click="viewMode = 'table'"
              >
                <el-icon><Grid /></el-icon>
                表格视图
              </el-button>
              <el-button 
                :type="viewMode === 'card' ? 'primary' : ''"
                @click="viewMode = 'card'"
              >
                <el-icon><Menu /></el-icon>
                卡片视图
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- 表格视图 -->
      <el-table
        v-if="viewMode === 'table'"
        :data="paginatedTickets"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        :default-sort="{ prop: 'createdAt', order: 'descending' }"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="工单ID" width="100" sortable="custom">
          <template #default="{ row }">
            <el-link @click="viewTicketDetail(row.id)" type="primary">
              #{{ row.id }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ translateStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="{ row }">
            <el-tag :type="getPriorityType(row.priority)" size="small">
              {{ translatePriority(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assigneeName" label="负责人" width="120" />
        <el-table-column prop="createdAt" label="创建时间" width="160" sortable="custom">
          <template #default="{ row }">
            {{ formatDateTime(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="160" sortable="custom">
          <template #default="{ row }">
            {{ formatDateTime(row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button size="small" @click="viewTicketDetail(row.id)">
                查看
              </el-button>
              <el-button 
                size="small" 
                @click="editTicket(row)"
                v-if="authStore.hasPermission(PERMISSIONS.TICKET_UPDATE)"
              >
                编辑
              </el-button>
              <el-button 
                size="small" 
                type="danger" 
                @click="deleteTicket(row)"
                v-if="authStore.hasPermission(PERMISSIONS.TICKET_DELETE)"
              >
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <div 
          v-for="ticket in paginatedTickets" 
          :key="ticket.id"
          class="ticket-card"
          @click="viewTicketDetail(ticket.id)"
        >
          <div class="card-header">
            <div class="ticket-id">#{{ ticket.id }}</div>
            <div class="ticket-status">
              <el-tag :type="getStatusType(ticket.status)" size="small">
                {{ translateStatus(ticket.status) }}
              </el-tag>
            </div>
          </div>
          <div class="ticket-title">{{ ticket.title }}</div>
          <div class="ticket-meta">
            <div class="meta-item">
              <el-icon><Flag /></el-icon>
              <el-tag :type="getPriorityType(ticket.priority)" size="small">
                {{ translatePriority(ticket.priority) }}
              </el-tag>
            </div>
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>{{ ticket.assigneeName || '未分配' }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span>{{ formatDateTime(ticket.createdAt) }}</span>
            </div>
          </div>
          <div class="card-actions">
            <el-button size="small" @click.stop="viewTicketDetail(ticket.id)">
              查看详情
            </el-button>
            <el-button 
              size="small" 
              @click.stop="editTicket(ticket)"
              v-if="authStore.hasPermission(PERMISSIONS.TICKET_UPDATE)"
            >
              编辑
            </el-button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredTickets.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 批量操作工具栏 -->
    <el-card v-if="selectedTickets.length > 0" class="batch-actions-card">
      <div class="batch-actions">
        <span class="selected-count">已选择 {{ selectedTickets.length }} 个工单</span>
        <el-button-group>
          <el-button 
            @click="batchAssign"
            v-if="authStore.hasPermission(PERMISSIONS.TICKET_ASSIGN)"
          >
            <el-icon><User /></el-icon>
            批量指派
          </el-button>
          <el-button 
            @click="batchUpdateStatus"
            v-if="authStore.hasPermission(PERMISSIONS.TICKET_UPDATE)"
          >
            <el-icon><Edit /></el-icon>
            批量更新状态
          </el-button>
          <el-button 
            @click="batchDelete"
            type="danger"
            v-if="authStore.hasPermission(PERMISSIONS.TICKET_DELETE)"
          >
            <el-icon><Delete /></el-icon>
            批量删除
          </el-button>
        </el-button-group>
      </div>
    </el-card>

    <!-- 创建/编辑工单对话框 -->
    <el-dialog
      v-model="ticketDialog.visible"
      :title="ticketDialog.isEdit ? '编辑工单' : '创建工单'"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="ticketFormRef"
        :model="ticketForm"
        :rules="ticketRules"
        label-width="100px"
      >
        <el-form-item label="工单标题" prop="title">
          <el-input v-model="ticketForm.title" placeholder="请输入工单标题" />
        </el-form-item>
        <el-form-item label="问题描述" prop="description">
          <el-input
            v-model="ticketForm.description"
            type="textarea"
            :rows="4"
            placeholder="请详细描述问题"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="ticketForm.priority" placeholder="请选择优先级" style="width: 100%">
                <el-option label="高" value="HIGH" />
                <el-option label="中" value="MEDIUM" />
                <el-option label="低" value="LOW" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类" prop="categoryId">
              <el-select v-model="ticketForm.categoryId" placeholder="请选择分类" style="width: 100%">
                <el-option label="技术问题" :value="1" />
                <el-option label="功能问题" :value="2" />
                <el-option label="性能问题" :value="3" />
                <el-option label="其他" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="负责人" prop="assigneeId" v-if="authStore.hasPermission(PERMISSIONS.TICKET_ASSIGN)">
          <el-select v-model="ticketForm.assigneeId" placeholder="请选择负责人" style="width: 100%">
            <el-option label="未分配" value="" />
            <el-option 
              v-for="agent in agents" 
              :key="agent.id" 
              :label="agent.name" 
              :value="agent.id" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="ticketDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitTicket">
          {{ ticketDialog.isEdit ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 批量指派对话框 -->
    <el-dialog
      v-model="batchAssignDialog.visible"
      title="批量指派工单"
      width="400px"
    >
      <el-form label-width="80px">
        <el-form-item label="负责人">
          <el-select v-model="batchAssignDialog.assigneeId" placeholder="请选择负责人" style="width: 100%">
            <el-option 
              v-for="agent in agents" 
              :key="agent.id" 
              :label="agent.name" 
              :value="agent.id" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="batchAssignDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchAssign">确认指派</el-button>
      </template>
    </el-dialog>

    <!-- 批量更新状态对话框 -->
    <el-dialog
      v-model="batchStatusDialog.visible"
      title="批量更新状态"
      width="400px"
    >
      <el-form label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="batchStatusDialog.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="待处理" value="OPEN" />
            <el-option label="处理中" value="IN_PROGRESS" />
            <el-option label="挂起" value="PENDING" />
            <el-option label="已解决" value="RESOLVED" />
            <el-option label="已关闭" value="CLOSED" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="batchStatusDialog.note"
            type="textarea"
            :rows="3"
            placeholder="请输入状态更新备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="batchStatusDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmBatchStatus">确认更新</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useTicketsStore } from '../store/tickets'
import { useAuthStore, PERMISSIONS } from '../store/auth'
import { useUserStore } from '../store/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Document, Clock, Check, Timer, List, Refresh,
  Search, Grid, Menu, Flag, User, Delete, Edit, DataAnalysis
} from '@element-plus/icons-vue'

export default {
  name: 'TicketManagement',
  components: {
    Document, Clock, Check, Timer, List, Refresh,
    Search, Grid, Menu, Flag, User, Delete, Edit, DataAnalysis
  },
  setup() {
    const router = useRouter()
    const ticketsStore = useTicketsStore()
    const authStore = useAuthStore()
    const userStore = useUserStore()

    // 响应式数据
    const loading = ref(false)
    const searchKeyword = ref('')
    const statusFilter = ref('')
    const priorityFilter = ref('')
    const assigneeFilter = ref('')
    const viewMode = ref('table')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const selectedTickets = ref([])
    const submitting = ref(false)

    // 对话框状态
    const ticketDialog = ref({ visible: false, isEdit: false })
    const batchAssignDialog = ref({ visible: false, assigneeId: '' })
    const batchStatusDialog = ref({ visible: false, status: '', note: '' })

    // 表单数据
    const ticketForm = reactive({
      id: null,
      title: '',
      description: '',
      priority: 'MEDIUM',
      categoryId: 4,  // 默认为其他
      assigneeId: ''
    })

    // 表单验证规则
    const ticketRules = {
      title: [
        { required: true, message: '请输入工单标题', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入问题描述', trigger: 'blur' }
      ],
      priority: [
        { required: true, message: '请选择优先级', trigger: 'change' }
      ],
      category: [
        { required: true, message: '请选择分类', trigger: 'change' }
      ]
    }

    // 计算属性
    const stats = computed(() => ({
      totalTickets: ticketsStore.tickets.length,
      pendingTickets: ticketsStore.tickets.filter(t => t.status === 'OPEN').length,
      inProgressTickets: ticketsStore.tickets.filter(t => t.status === 'IN_PROGRESS').length,
      resolvedTickets: ticketsStore.tickets.filter(t => t.status === 'RESOLVED').length
    }))

    const agents = computed(() => userStore.agents)

    const filteredTickets = computed(() => {
      let tickets = ticketsStore.tickets

      // 搜索筛选
      if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        tickets = tickets.filter(ticket => 
          ticket.title.toLowerCase().includes(keyword) ||
          ticket.description.toLowerCase().includes(keyword) ||
          ticket.id.toString().includes(keyword)
        )
      }

      // 状态筛选
      if (statusFilter.value) {
        tickets = tickets.filter(ticket => ticket.status === statusFilter.value)
      }

      // 优先级筛选
      if (priorityFilter.value) {
        tickets = tickets.filter(ticket => ticket.priority === priorityFilter.value)
      }

      // 负责人筛选
      if (assigneeFilter.value) {
        tickets = tickets.filter(ticket => ticket.assigneeId === assigneeFilter.value)
      }

      return tickets
    })

    const paginatedTickets = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return filteredTickets.value.slice(start, end)
    })

    // 方法
    const refreshTickets = async () => {
      loading.value = true
      try {
        await ticketsStore.fetchTickets()
        ElMessage.success('工单列表已刷新')
      } catch (error) {
        ElMessage.error('刷新失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const handleSearch = () => {
      currentPage.value = 1
    }

    const handleFilter = () => {
      currentPage.value = 1
    }

    const resetFilters = () => {
      searchKeyword.value = ''
      statusFilter.value = ''
      priorityFilter.value = ''
      assigneeFilter.value = ''
      currentPage.value = 1
    }

    const applyFilters = () => {
      currentPage.value = 1
    }

    const handleSelectionChange = (selection) => {
      selectedTickets.value = selection
    }

    const handleSortChange = ({ prop, order }) => {
      // 实现排序逻辑
      console.log('Sort:', prop, order)
    }

    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }

    const handleCurrentChange = (page) => {
      currentPage.value = page
    }

    const viewTicketDetail = (ticketId) => {
      router.push(`/tickets/${ticketId}`)
    }

    const goStatisticsDashboard = () => {
      router.push('/statistics-dashboard')
    }

    const showCreateDialog = () => {
      ticketDialog.value = { visible: true, isEdit: false }
      resetTicketForm()
    }

    const editTicket = (ticket) => {
      ticketDialog.value = { visible: true, isEdit: true }
      Object.assign(ticketForm, {
        id: ticket.id,
        title: ticket.title,
        description: ticket.description,
        priority: ticket.priority,
        category: ticket.category,
        assigneeId: ticket.assigneeId || ''
      })
    }

    const resetTicketForm = () => {
      Object.assign(ticketForm, {
        id: null,
        title: '',
        description: '',
        priority: 'MEDIUM',
        category: 'OTHER',
        assigneeId: ''
      })
    }

    const submitTicket = async () => {
      try {
        submitting.value = true
        
        if (ticketDialog.value.isEdit) {
          await ticketsStore.updateTicket(ticketForm.id, ticketForm)
          ElMessage.success('工单更新成功')
        } else {
          await ticketsStore.createTicket(ticketForm)
          ElMessage.success('工单创建成功')
        }
        
        ticketDialog.value.visible = false
        await refreshTickets()
      } catch (error) {
        ElMessage.error('操作失败：' + error.message)
      } finally {
        submitting.value = false
      }
    }

    const deleteTicket = async (ticket) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除工单 #${ticket.id} 吗？`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        await ticketsStore.deleteTicket(ticket.id)
        ElMessage.success('工单删除成功')
        await refreshTickets()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败：' + error.message)
        }
      }
    }

    const batchAssign = () => {
      batchAssignDialog.value = { visible: true, assigneeId: '' }
    }

    const confirmBatchAssign = async () => {
      try {
        const assigneeId = batchAssignDialog.value.assigneeId
        if (!assigneeId) {
          ElMessage.warning('请选择负责人')
          return
        }

        await ticketsStore.batchAssign(selectedTickets.value.map(t => t.id), assigneeId)
        ElMessage.success('批量指派成功')
        batchAssignDialog.value.visible = false
        selectedTickets.value = []
        await refreshTickets()
      } catch (error) {
        ElMessage.error('批量指派失败：' + error.message)
      }
    }

    const batchUpdateStatus = () => {
      batchStatusDialog.value = { visible: true, status: '', note: '' }
    }

    const confirmBatchStatus = async () => {
      try {
        const status = batchStatusDialog.value.status
        if (!status) {
          ElMessage.warning('请选择状态')
          return
        }

        await ticketsStore.batchUpdateStatus(selectedTickets.value.map(t => t.id), status, batchStatusDialog.value.note)
        ElMessage.success('批量更新状态成功')
        batchStatusDialog.value.visible = false
        selectedTickets.value = []
        await refreshTickets()
      } catch (error) {
        ElMessage.error('批量更新失败：' + error.message)
      }
    }

    const batchDelete = async () => {
      try {
        await ElMessageBox.confirm(
          `确定要删除选中的 ${selectedTickets.value.length} 个工单吗？`,
          '确认批量删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        await ticketsStore.batchDelete(selectedTickets.value.map(t => t.id))
        ElMessage.success('批量删除成功')
        selectedTickets.value = []
        await refreshTickets()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('批量删除失败：' + error.message)
        }
      }
    }

    const showImportDialog = () => {
      ElMessage.info('导入功能开发中...')
    }

    const exportTickets = () => {
      ElMessage.info('导出功能开发中...')
    }

    // 工具方法
    const getStatusType = (status) => {
      const types = {
        OPEN: 'warning',
        IN_PROGRESS: 'primary',
        PENDING: 'info',
        RESOLVED: 'success',
        CLOSED: 'info'
      }
      return types[status] || 'info'
    }

    const getPriorityType = (priority) => {
      const types = {
        HIGH: 'danger',
        MEDIUM: 'warning',
        LOW: 'info'
      }
      return types[priority] || 'info'
    }

    const translateStatus = (status) => {
      const statusMap = {
        OPEN: '待处理',
        IN_PROGRESS: '处理中',
        PENDING: '挂起',
        RESOLVED: '已解决',
        CLOSED: '已关闭'
      }
      return statusMap[status] || status
    }

    const translatePriority = (priority) => {
      const priorityMap = {
        HIGH: '高',
        MEDIUM: '中',
        LOW: '低'
      }
      return priorityMap[priority] || priority
    }

    const formatDateTime = (dateTime) => {
      if (!dateTime) return '-'
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN')
    }

    // 生命周期
    onMounted(async () => {
      loading.value = true
      try {
        await Promise.all([
          ticketsStore.fetchTickets(),
          userStore.fetchUsers()
        ])
      } catch (error) {
        console.error('Failed to load data:', error)
      } finally {
        loading.value = false
      }
    })

    return {
      loading,
      searchKeyword,
      statusFilter,
      priorityFilter,
      assigneeFilter,
      viewMode,
      currentPage,
      pageSize,
      selectedTickets,
      submitting,
      ticketDialog,
      batchAssignDialog,
      batchStatusDialog,
      ticketForm,
      ticketRules,
      stats,
      agents,
      filteredTickets,
      paginatedTickets,
      refreshTickets,
      handleSearch,
      handleFilter,
      resetFilters,
      applyFilters,
      handleSelectionChange,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      viewTicketDetail,
      goStatisticsDashboard,
      showCreateDialog,
      editTicket,
      submitTicket,
      deleteTicket,
      batchAssign,
      confirmBatchAssign,
      batchUpdateStatus,
      confirmBatchStatus,
      batchDelete,
      showImportDialog,
      exportTickets,
      getStatusType,
      getPriorityType,
      translateStatus,
      translatePriority,
      formatDateTime,
      authStore,
      PERMISSIONS
    }
  }
}
</script>

<style scoped>
.ticket-management-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.total { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.pending { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.progress { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-icon.resolved { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 12px;
}

.filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-left {
  display: flex;
  align-items: center;
}

.ticket-list-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

.ticket-card {
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 16px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ticket-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.ticket-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ticket-id {
  font-weight: 600;
  color: #409eff;
}

.ticket-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  line-height: 1.4;
}

.ticket-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.batch-actions-card {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.selected-count {
  font-weight: 500;
  color: #303133;
}

@media (max-width: 768px) {
  .ticket-management-container {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-toolbar {
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-left {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .card-view {
    grid-template-columns: 1fr;
  }
}
</style>